<template>
  <div class="draw-wrapper">
    <div
      class="draw-box"
      :class="{ toggle: toggle.mode }"
      v-if="props.isShowMode"
    >
      <div class="draw-box-header" @click="handleToggle('mode')">
        <div class="header-title">模式切换</div>
        <div class="header-btn">
          <template v-if="!toggle.mode">
            <div class="btn">收起</div>
            <img src="@/assets/common/icon-up.png" class="icons" />
          </template>
          <template v-else>
            <img src="@/assets/common/icon-down.png" class="icons" />
          </template>
        </div>
      </div>
      <div class="draw-box-content">
        <!-- 模式切换 -->
        <mode></mode>
      </div>
    </div>
    <div class="draw-box" :class="{ toggle: toggle.control }">
      <div class="draw-box-header" @click="handleToggle('control')">
        <div class="header-title" :class="{ active: status == 1 }">
          操作控制
        </div>
        <div class="header-btn">
          <template v-if="!toggle.control">
            <div class="btn">收起</div>
            <img src="@/assets/common/icon-up.png" class="icons" />
          </template>
          <template v-else>
            <img src="@/assets/common/icon-down.png" class="icons" />
          </template>
        </div>
      </div>
      <div class="draw-box-content">
        <control />
      </div>
    </div>
    <div class="draw-box" :class="{ toggle: toggle.result }">
      <div class="draw-box-header" @click="handleToggle('result')">
        <div class="header-title" :class="{ active: status == 2 }">
          结果展示
        </div>
        <div class="header-btn">
          <template v-if="!toggle.result">
            <div class="btn">收起</div>
            <img src="@/assets/common/icon-up.png" class="icons" />
          </template>
          <template v-else>
            <img src="@/assets/common/icon-down.png" class="icons" />
          </template>
        </div>
      </div>
      <div class="draw-box-content">
        <result
          :curIndex="curResultIndex"
          :previewImg="previewImg"
          :paramers="paramers"
          :show-dot="showDot"
          @change-tab="handleDrawTab"
        >
        </result>
      </div>
    </div>
    <!-- <div class="draw-box" :class="{ toggle: toggle.log }">
      <div class="draw-box-header" @click="handleToggle('log')">
        <div class="header-title">操作日志</div>
        <div class="header-btn">
          <template v-if="!toggle.log">
            <div class="btn">收起</div>
            <img src="@/assets/common/icon-up.png" class="icons" />
          </template>
          <template v-else>
            <img src="@/assets/common/icon-down.png" class="icons" />
          </template>
        </div>
      </div>
      <div class="draw-box-content">
        <log :logList="logList"></log>
      </div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted, onUnmounted, computed } from "vue";
import { useEventStore } from "@/store/modules/events";
//右侧模式组件
import mode from "./mode.vue";
//右侧控制组件
import control from "./control.vue";
//右侧结果组件
import result from "./result.vue";
//右侧日志组件
import log from "./log.vue";
import { useTipsStore } from "@/store/modules/tips";
import * as hooks from "@/hooks/useTestHooks";
const tipsStore = useTipsStore();
const status = computed(() => tipsStore.stepTip);
const props = defineProps({
  isShowMode: {
    type: Boolean,
    default: true,
  },
});
const store = useEventStore();
//右侧弹窗伸缩状态
const toggle: any = reactive({
  mode: false,
  control: false,
  log: false,
  result: false,
});
//控制右侧弹窗的展开与收起
const handleToggle = (type: any) => {
  toggle[type] = !toggle[type];
};
const showDot = ref(false);
//监听3d传过来的消息
const handleMessage = async (e: any) => {
  if (e.data.type === "changeResultShow") {
    curResultIndex.value = 1;
    hooks.useHandleChangeResult(curResultIndex.value + 1);
    showDot.value = true;
  }
};
onMounted(() => {
  window.addEventListener("message", handleMessage);
});
onUnmounted(() => {
  window.removeEventListener("message", handleMessage);
});
//3d传过来的图片预览
const previewImg = ref();
//结果展示tab切换回调
const curResultIndex = ref(0);
//结果展示tab切换回调
const handleDrawTab = (index: any) => {
  curResultIndex.value = index;
  hooks.useHandleChangeResult(index + 1);
};
//参数列表
const paramers: any = ref([]);
let time1: any = null;
let time2: any = null;
let time3: any = null;
watch(
  () => store.startMeasurement,
  (val) => {
    curResultIndex.value = 0;
    //hooks.useHandleChangeResult(curResultIndex.value + 1);
    if (val) {
      paramers.value = [];
      let params = [
        {
          name: "入射角(°)",
          value: 70,
        },
        {
          name: "衬底折射率",
          value: "3.88-0.02i",
        },
        {
          name: "薄膜折射率范围",
          value: "1.3~2.49",
        },
        {
          name: "P(°)",
          value: "92.662",
        },
        {
          name: "A(°)",
          value: "29.587",
        },
      ];
      paramers.value = [...paramers.value, ...params];

      time2 = setTimeout(() => {
        let params = [
          {
            name: "薄膜折射率",
            value: 1.45,
          },
          {
            name: "薄膜基厚度(m)",
            value: 71.8,
          },
          {
            name: "厚度周期(mm)",
            value: 286.52,
          },
        ];
        paramers.value = [...paramers.value, ...params];
        store.setStartMeasurement(2);
      }, 10000);
      // time3 = setTimeout(() => {
      //   let params = [
      //     {
      //       name: "折射角3(°)",
      //       value: 40,
      //     },
      //     {
      //       name: "厚度(nm)",
      //       value: 130.6,
      //     },
      //   ];
      //   paramers.value = [...paramers.value, ...params];
      //   store.setStartMeasurement(2);
      // }, 30000);
    }
  }
);
watch(
  () => store.resetParameters,
  (val) => {
    if (val) {
      curResultIndex.value = 0;
      //hooks.useHandleChangeResult(curResultIndex.value + 1);
      if (time1) clearTimeout(time1);
      if (time2) clearTimeout(time2);
      if (time3) clearTimeout(time3);

      paramers.value = [];
    }
  }
);
//日志列表
const logList = ref([
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
  {
    name: "安装调试组件",
    time: "23:00:00",
  },
]);
</script>
<style lang="less" scoped>
.draw-wrapper {
  position: absolute;
  right: 0px;
  padding-right: 12px;
  top: 12px;
  bottom: 12px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: self-end;
  overflow-y: auto;
  .draw-box {
    width: 300px;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #fff;
    &.toggle {
      width: 46px;
      position: relative;
      margin-right: -12px;
      background-color: transparent;
      .draw-box-header {
        padding-right: 4px;
        width: 46px;
        height: 137px;
        box-shadow: none;
        background: #2776ff;
        border-radius: 12px 0px 0px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .header-title {
          width: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-bottom: 2px;
        }
      }
      .draw-box-content {
        display: none;
      }
    }
    .draw-box-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      box-shadow: inset 0px -1px 0px 0px #e6ebf1;
      cursor: pointer;
      .header-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #262626;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        &.active {
          color: #f00;
          font-size: 15px;
        }
      }
      .header-btn {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #595959;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        cursor: pointer;
        .icons {
          width: 12px;
          height: 12px;
          margin-left: 4px;
        }
      }
    }
    .draw-box-content {
      padding: 12px;
    }
  }
}
</style>
